.flex-box {
  display: flex;
  box-sizing: border-box;
}
.flex-box__item {
  flex: 1;
}
.wrapper {
  flex-direction: column;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  padding: 20px 30px;
  background: #040e29;
}
.head {
  margin: 0 auto 10px auto;
  height: 8.7962963vh;
}
.app {
  flex: 1;
  justify-content: space-between;
  position: relative;
}
.app__side {
  flex-direction: column;
  justify-content: space-between;
  width: 24.6875vw;
}
.app__center {
  flex-direction: column;
  justify-content: space-between;
  width: 42.1875vw;
}
.app__block {
  position: relative;
  border: 2px solid #0b386b;
}
.app__block_sm {
  overflow: hidden;
  text-align: center;
  border-radius: 4px;
  height: 26.57407407vh;
  width: 24.6875vw;
}
.app__block_lg {
  position: relative;
  box-sizing: border-box;
  height: 79.07407407vh;
  width: 42.1875vw;
}
.app__block-wrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.app__block-title {
  position: relative;
  z-index: 20;
  display: inline-block;
  width: 11.14583333vw;
  height: 2.08333333vw;
  text-align: center;
  color: #00b2f5;
  font-size: 1.04166667vw;
  line-height: 1.7;
}
.app__block-title::after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  transform: perspective(1.5em) rotateX(-5deg);
  transform-origin: top;
  border: 1px solid #0b386b;
  border-top: none;
  background: #071743;
  box-shadow: 0 0 1em #0b386b inset;
}
.app__block-content {
  height: calc(24.49107407vh);
}
.app__block-dcr {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #2facd7;
}
.app__block-dcr_right {
  width: 0.15625vw;
  height: 1.04166667vw;
  transform: skewY(45deg);
}
.app__block-dcr_bottom {
  width: 0.83333333vw;
  height: 0.15625vw;
  transform: skewX(135deg);
}
.app__block-dcr_thin {
  right: 0.3125vw;
  bottom: 0.3125vw;
  width: 0.57291667vw;
  height: 0.78125vw;
  border-right: 1px solid #154d6f;
  border-bottom: 1px solid #154d6f;
  background: transparent;
}
.app__block-corner {
  position: absolute;
  z-index: 999;
  display: block;
  width: 1.04166667vw;
  height: 1.04166667vw;
  border-style: solid;
  border-color: #6fc5c0;
}
.app__block-corner_top-left {
  top: -2px;
  left: -2px;
  border-width: 2px 0 0 2px;
}
.app__block-corner_top-right {
  top: -2px;
  right: -2px;
  border-width: 2px 2px 0 0;
}
.app__block-corner_bottom-right {
  right: -2px;
  bottom: -2px;
  border-width: 0 2px 2px 0;
}
.app__block-corner_bottom-left {
  bottom: -2px;
  left: -2px;
  border-width: 0 0 2px 2px;
}
.app__desc {
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 6.45833333vw;
  padding: 23px 37px 18px 37px;
  background: #0f1330;
}
.app__desc-title {
  color: #00adef;
  font-size: 1.25vw;
}
.app__desc-content {
  width: 45%;
  color: #01a6e6;
  font-size: 0.52083333vw;
}
.app__desc-time {
  box-sizing: border-box;
  background: url('images/weatherBg.png') center no-repeat;
  background-size: contain;
  width: 13.07291667vw;
  height: 4.58333333vw;
  padding: 10px 25px;
  color: #fff;
  position: relative;
}
.app__desc-time_split {
  font-size: 0.46875vw;
  line-height: 1;
}
.app__desc-time_time {
  font-size: 1.97916667vw;
  line-height: 1;
}
.app__desc-time_date {
  text-align: right;
  font-size: 0.52083333vw;
  line-height: 1;
}
.app__company-info {
  position: relative;
  height: 2.08333333vw;
  text-align: center;
  background: url('images/company.png') center no-repeat;
  background-size: contain;
  color: #00f6ff;
  font-size: 1.04166667vw;
  line-height: 2.08333333vw;
  width: 42.1875vw;
}
.daily-sta {
  display: flex;
}
.sta-list {
  width: 70%;
  margin: 0 auto;
}
.sta-list-item {
  display: flex;
  line-height: 2;
}
.sta-list-item__label {
  display: inline-block;
  flex: 1;
  text-align: left;
  color: #13c2c2;
}
.sta-list-item__number {
  display: inline-block;
  flex: 1;
  text-align: right;
  color: #fa8c16;
}
.daily-sta {
  position: relative;
  width: 100%;
  height: 100%;
}
.daily-sta__lg {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
}
.daily-sta__total {
  position: absolute;
  top: 1.35416667vw;
  right: -20px;
  box-sizing: border-box;
  width: 40%;
  height: 50%;
  text-align: left;
  color: #fff;
}
.daily-sta__total-title {
  font-size: 0.72916667vw;
}
.daily-sta__total-number {
  font-size: 1.25vw;
}
.daily-sta__sm {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 50%;
}
.temp {
  height: 34.90740741vh;
  width: 44.27083333vw;
}
.site-user {
  height: 34.90740741vh;
  width: 44.27083333vw;
  padding: 20px 40px;
  box-sizing: border-box;
  flex-direction: column;
  background: url('images/bgin.png') center no-repeat, url('images/bgout.png') center no-repeat;
  background-size: contain;
  position: relative;
}
.site-user__title {
  font-size: 1.51041667vw;
  color: #00B9FF;
  align-items: top;
}
.site-user__top {
  position: absolute;
  top: 20px;
  right: 40px;
  z-index: 2048;
}
.site-user__content {
  flex: 1;
  align-items: stretch;
}
.site-user__sta {
  color: #fff;
  width: 6.51041667vw;
  flex-direction: column;
  justify-content: space-between;
}
.site-user__sta-row {
  align-items: center;
}
.site-user__sta-row-title {
  white-space: nowrap;
  font-size: 0.41666667vw;
}
.site-user__sta-row-content {
  font-size: 1.25vw;
}
.site-user__icon {
  width: 1.30208333vw;
  height: 1.30208333vw;
  margin-right: 0.67708333vw;
}
.site-user__icon_lg {
  width: 1.5625vw;
  height: 1.5625vw;
  margin-right: 0.52083333vw;
}
.detail-block {
  height: 26.57407407vh;
  width: 24.6875vw;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: 1024;
  background: #040e29;
  transition: all ease-in-out 0.5s;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-around;
}
.detail-block__row {
  justify-content: space-around;
}
.detail-block__left {
  left: 15vw;
  top: 33%;
}
.detail-block__left_active {
  opacity: 1;
  width: 100vw;
  height: 100%;
  left: -30px;
  top: 0;
  bottom: 0;
}
.detail-block__right {
  right: 15vw;
  top: 17%;
}
.detail-block__right_active {
  opacity: 1;
  width: 100vw;
  height: 100%;
  right: -30px;
  top: 0;
  bottom: 0;
}
.weather-0 {
  background: url('images/weather/0.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-1 {
  background: url('images/weather/1.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-2 {
  background: url('images/weather/2.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-3 {
  background: url('images/weather/3.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-4 {
  background: url('images/weather/4.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-5 {
  background: url('images/weather/5.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-6 {
  background: url('images/weather/6.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-7 {
  background: url('images/weather/7.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-8 {
  background: url('images/weather/8.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-9 {
  background: url('images/weather/9.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-10 {
  background: url('images/weather/10.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-11 {
  background: url('images/weather/11.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-12 {
  background: url('images/weather/12.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-13 {
  background: url('images/weather/13.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-14 {
  background: url('images/weather/14.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-15 {
  background: url('images/weather/15.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-16 {
  background: url('images/weather/16.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-17 {
  background: url('images/weather/17.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-18 {
  background: url('images/weather/18.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-19 {
  background: url('images/weather/19.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-20 {
  background: url('images/weather/20.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-21 {
  background: url('images/weather/21.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-22 {
  background: url('images/weather/22.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-23 {
  background: url('images/weather/23.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-24 {
  background: url('images/weather/24.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-25 {
  background: url('images/weather/25.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-26 {
  background: url('images/weather/26.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-27 {
  background: url('images/weather/27.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-28 {
  background: url('images/weather/28.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-29 {
  background: url('images/weather/29.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-30 {
  background: url('images/weather/30.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-31 {
  background: url('images/weather/31.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather_base {
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.weather-53 {
  background: url('images/weather/53.png') center no-repeat;
  width: 3.125vw;
  height: 3.125vw;
  background-size: contain;
  position: absolute;
  top: -0.52083333vw;
  right: 1.875vw;
  z-index: 64;
}
.top3 {
  background: #091639;
  box-sizing: border-box;
  padding: 0.52083333vw;
  margin-right: 1.04166667vw;
  border-radius: 0.3125vw;
}
.top3__icon {
  width: 0.26041667vw;
  height: 0.625vw;
  border-radius: 0.15625vw;
  background-size: cover;
}
.top3__title {
  font-size: 0.625vw;
  line-height: 0.625vw;
  margin-left: 0.26041667vw;
  font-style: italic;
  color: #fff;
  margin-bottom: 0.41666667vw;
}
.top3__list {
  font-size: 0.52083333vw;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 1.35416667vw;
}
.top3__list-item {
  color: #C5EBFF;
}
.top3__list-text {
  color: #00B9FF;
}
